<template>
  <div class="help-page">
    <!-- 面包屑导航 -->
    <div
      class="container mx-auto px-4 py-4 border-b border-gray-200 dark:border-gray-700"
    >
      <Breadcrumb
        :items="[{ path: '/', title: '首页' }, { title: '帮助中心' }]"
      />
    </div>

    <!-- 页面头部 -->
    <div class="page-header bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              帮助中心
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2">
              常见问题解答，获取使用帮助
            </p>
          </div>
          <el-button class="back-btn" @click="router.back()">
            <el-icon class="mr-1"><Back /></el-icon>
            返回上一页
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 紧急联系卡片 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <div class="flex items-center mb-4">
            <el-icon class="text-red-500 text-2xl mr-3"><Warning /></el-icon>
            <h2 class="text-xl font-bold">紧急联系</h2>
          </div>
          <div class="space-y-4">
            <div
              class="flex items-center justify-between p-3 card-bg rounded-lg"
            >
              <span class="text-red-700">景区救援</span>
              <el-button type="danger" @click="handleEmergencyCall('120')">
                <el-icon class="mr-1"><Phone /></el-icon>
                120
              </el-button>
            </div>
            <div
              class="flex items-center justify-between p-3 card-bg rounded-lg"
            >
              <span class="text-blue-700">警务救助</span>
              <el-button type="primary" @click="handleEmergencyCall('110')">
                <el-icon class="mr-1"><Phone /></el-icon>
                110
              </el-button>
            </div>
            <div
              class="flex items-center justify-between p-3 card-bg rounded-lg"
            >
              <span class="text-orange-700">消防救援</span>
              <el-button type="warning" @click="handleEmergencyCall('119')">
                <el-icon class="mr-1"><Phone /></el-icon>
                119
              </el-button>
            </div>
          </div>
        </div>

        <!-- 游客服务卡片 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <div class="flex items-center mb-4">
            <el-icon class="text-primary-500 text-2xl mr-3"
              ><Service
            /></el-icon>
            <h2 class="text-xl font-bold">游客服务</h2>
          </div>
          <div class="space-y-4">
            <div
              class="flex items-center justify-between p-3 card-bg rounded-lg"
            >
              <span class="text-gray-700">游客咨询</span>
              <el-button @click="handleServiceCall('12301')">
                <el-icon class="mr-1"><Phone /></el-icon>
                12301
              </el-button>
            </div>
            <div
              class="flex items-center justify-between p-3 card-bg rounded-lg"
            >
              <span class="text-gray-700">投诉建议</span>
              <el-button @click="handleServiceCall('12345')">
                <el-icon class="mr-1"><Phone /></el-icon>
                12345
              </el-button>
            </div>
            <div
              class="flex items-center justify-between p-3 card-bg rounded-lg"
            >
              <span class="text-gray-700">天气预报</span>
              <el-button @click="handleServiceCall('12121')">
                <el-icon class="mr-1"><Phone /></el-icon>
                12121
              </el-button>
            </div>
          </div>
        </div>

        <!-- 在线客服卡片 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <div class="flex items-center mb-4">
            <el-icon class="text-green-500 text-2xl mr-3"
              ><ChatLineRound
            /></el-icon>
            <h2 class="text-xl font-bold">在线客服</h2>
          </div>
          <div class="text-center py-8">
            <el-button type="success" size="large" @click="handleOnlineService">
              <el-icon class="mr-2"><Message /></el-icon>
              联系在线客服
            </el-button>
            <p class="text-gray-500 mt-4">工作时间：09:00 - 21:00</p>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="mt-8">
        <div class="flex items-center mb-6">
          <div
            class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center"
          >
            <el-icon class="text-3xl text-primary-500 dark:text-primary-400"
              ><QuestionFilled
            /></el-icon>
          </div>
          <div class="ml-4">
            <h2 class="text-2xl font-bold">常见问题</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
              解答您的疑惑，提供及时帮助
            </p>
          </div>
        </div>
        <el-collapse class="custom-collapse">
          <el-collapse-item title="如何使用一键求助功能？" name="1">
            <div class="faq-content">
              <div class="flex items-start">
                <div
                  class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0 mt-1"
                >
                  <el-icon class="text-red-500 dark:text-red-400"
                    ><Warning
                  /></el-icon>
                </div>
                <div class="ml-4 flex-1">
                  <p class="text-gray-600 dark:text-gray-400">
                    点击对应的紧急联系按钮即可直接拨打电话。在紧急情况下，请：
                  </p>
                  <ul class="mt-4 space-y-3">
                    <li
                      class="flex items-center bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 transform hover:scale-[1.02] transition-transform"
                    >
                      <div
                        class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center"
                      >
                        <span
                          class="text-primary-500 dark:text-primary-400 font-medium"
                          >1</span
                        >
                      </div>
                      <span class="ml-3 text-gray-600 dark:text-gray-300"
                        >保持冷静，清晰说明您的位置</span
                      >
                    </li>
                    <li
                      class="flex items-center bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 transform hover:scale-[1.02] transition-transform"
                    >
                      <div
                        class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center"
                      >
                        <span
                          class="text-primary-500 dark:text-primary-400 font-medium"
                          >2</span
                        >
                      </div>
                      <span class="ml-3 text-gray-600 dark:text-gray-300"
                        >描述需要的具体帮助</span
                      >
                    </li>
                    <li
                      class="flex items-center bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 transform hover:scale-[1.02] transition-transform"
                    >
                      <div
                        class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center"
                      >
                        <span
                          class="text-primary-500 dark:text-primary-400 font-medium"
                          >3</span
                        >
                      </div>
                      <span class="ml-3 text-gray-600 dark:text-gray-300"
                        >听从工作人员的指导</span
                      >
                    </li>
                    <li
                      class="flex items-center bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3 transform hover:scale-[1.02] transition-transform"
                    >
                      <div
                        class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center"
                      >
                        <span
                          class="text-primary-500 dark:text-primary-400 font-medium"
                          >4</span
                        >
                      </div>
                      <span class="ml-3 text-gray-600 dark:text-gray-300"
                        >保持电话畅通</span
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="景区内有医疗点吗？" name="2">
            <div class="faq-content">
              <div class="flex items-start">
                <div
                  class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0 mt-1"
                >
                  <el-icon class="text-green-500 dark:text-green-400"
                    ><FirstAidKit
                  /></el-icon>
                </div>
                <div class="ml-4 flex-1">
                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                    是的，景区内设有多个医疗服务点，可以提供基本的医疗救助。
                  </p>
                  <div
                    class="bg-gradient-to-br from-blue-50 to-green-50 dark:from-blue-900/20 dark:to-green-900/20 rounded-xl p-6"
                  >
                    <h4
                      class="font-medium text-gray-900 dark:text-white mb-4 flex items-center"
                    >
                      <el-icon class="mr-2"><Location /></el-icon>
                      医疗点位置
                    </h4>
                    <div class="grid gap-4">
                      <div
                        class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                      >
                        <el-icon
                          class="text-2xl text-primary-500 dark:text-primary-400 mr-3"
                          ><House
                        /></el-icon>
                        <div>
                          <h5 class="font-medium text-gray-900 dark:text-white">
                            游客中心一楼医务室
                          </h5>
                          <p
                            class="text-sm text-gray-500 dark:text-gray-400 mt-1"
                          >
                            全天24小时服务
                          </p>
                        </div>
                      </div>
                      <div
                        class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                      >
                        <el-icon
                          class="text-2xl text-primary-500 dark:text-primary-400 mr-3"
                          ><Location
                        /></el-icon>
                        <div>
                          <h5 class="font-medium text-gray-900 dark:text-white">
                            江滨公园北门急救站
                          </h5>
                          <p
                            class="text-sm text-gray-500 dark:text-gray-400 mt-1"
                          >
                            8:00-22:00
                          </p>
                        </div>
                      </div>
                      <div
                        class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                      >
                        <el-icon
                          class="text-2xl text-primary-500 dark:text-primary-400 mr-3"
                          ><OfficeBuilding
                        /></el-icon>
                        <div>
                          <h5 class="font-medium text-gray-900 dark:text-white">
                            文化广场服务中心
                          </h5>
                          <p
                            class="text-sm text-gray-500 dark:text-gray-400 mt-1"
                          >
                            9:00-21:00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="遇到纠纷该怎么办？" name="3">
            <div class="faq-content">
              <div class="flex items-start">
                <div
                  class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center flex-shrink-0 mt-1"
                >
                  <el-icon class="text-yellow-500 dark:text-yellow-400"
                    ><Warning
                  /></el-icon>
                </div>
                <div class="ml-4 flex-1">
                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                    您可以采取以下措施：
                  </p>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div
                      class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl p-6"
                    >
                      <h4
                        class="font-medium text-blue-700 dark:text-blue-300 mb-4 flex items-center"
                      >
                        <el-icon class="mr-2"><Timer /></el-icon>
                        立即处理
                      </h4>
                      <div class="space-y-3">
                        <div
                          class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                        >
                          <el-icon
                            class="text-xl text-blue-500 dark:text-blue-400 mr-3"
                            ><Phone
                          /></el-icon>
                          <span class="text-gray-700 dark:text-gray-300"
                            >拨打警务救助电话110</span
                          >
                        </div>
                        <div
                          class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                        >
                          <el-icon
                            class="text-xl text-blue-500 dark:text-blue-400 mr-3"
                            ><Service
                          /></el-icon>
                          <span class="text-gray-700 dark:text-gray-300"
                            >联系景区工作人员</span
                          >
                        </div>
                      </div>
                    </div>
                    <div
                      class="bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-900/20 dark:to-teal-900/20 rounded-xl p-6"
                    >
                      <h4
                        class="font-medium text-green-700 dark:text-green-300 mb-4 flex items-center"
                      >
                        <el-icon class="mr-2"><InfoFilled /></el-icon>
                        注意事项
                      </h4>
                      <div class="space-y-3">
                        <div
                          class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                        >
                          <el-icon
                            class="text-xl text-green-500 dark:text-green-400 mr-3"
                            ><Document
                          /></el-icon>
                          <span class="text-gray-700 dark:text-gray-300"
                            >保留相关证据</span
                          >
                        </div>
                        <div
                          class="flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-lg p-4 transform hover:scale-[1.02] transition-transform"
                        >
                          <el-icon
                            class="text-xl text-green-500 dark:text-green-400 mr-3"
                            ><ChatLineRound
                          /></el-icon>
                          <span class="text-gray-700 dark:text-gray-300"
                            >理性沟通解决</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import {
  Warning,
  Phone,
  Service,
  ChatLineRound,
  Message,
  QuestionFilled,
  Location,
  Document,
  FirstAidKit,
  House,
  OfficeBuilding,
  Timer,
  InfoFilled,
  Back,
} from "@element-plus/icons-vue";
import Breadcrumb from "@/components/global/Breadcrumb.vue";

const router = useRouter();

// 处理紧急电话
const handleEmergencyCall = (number) => {
  // 在实际应用中，这里应该调用设备的拨号功能
  ElMessage.success(`正在拨打紧急电话：${number}`);
};

// 处理服务电话
const handleServiceCall = (number) => {
  ElMessage.success(`正在拨打服务电话：${number}`);
};

// 处理在线客服
const handleOnlineService = () => {
  router.push("/service");
};
</script>

<style lang="scss" scoped>
.help-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900;

  .page-header {
    @apply mb-6;

    h1 {
      @apply text-gray-900 dark:text-white;
    }

    p {
      @apply text-gray-600 dark:text-gray-400;
    }
  }

  :deep(.white-card) {
    @apply dark:bg-gray-800;
  }

  h2 {
    @apply text-gray-900 dark:text-white;
  }

  p {
    @apply text-gray-600 dark:text-gray-400;
  }

  .text-gray-700 {
    @apply dark:text-gray-300;
  }

  .card-bg {
    @apply bg-gray-50 dark:bg-gray-700;
  }

  .bg-red-50 {
    @apply dark:bg-red-900/20;
  }

  .bg-blue-50 {
    @apply dark:bg-blue-900/20;
  }

  .bg-orange-50 {
    @apply dark:bg-orange-900/20;
  }

  :deep(.custom-collapse) {
    @apply border-0 divide-y divide-gray-100 dark:divide-gray-700 rounded-xl overflow-hidden;

    .el-collapse-item {
      @apply border-0;

      .el-collapse-item__header {
        @apply px-6 py-5 text-base font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all;

        &.is-active {
          @apply bg-gray-50 dark:bg-gray-700;
        }
      }

      .el-collapse-item__content {
        @apply px-6 py-6 text-base bg-white dark:bg-gray-800;
      }

      .el-collapse-item__arrow {
        @apply text-gray-400 dark:text-gray-500 transition-transform;
      }
    }
  }

  .faq-content {
    ul:not(.list-disc) {
      @apply list-none;
    }

    li {
      @apply flex items-center;
    }
  }

  .backdrop-blur-sm {
    backdrop-filter: blur(8px);
  }
}
</style>
